<template>
	<view class="search">
		<view class="tab">
			<view>
				<uni-segmented-control :current="current" :values="items" style-type="text" @clickItem="onClickItem" />
			</view>
		</view>
		<view class="con-wrap">
			<view class="scrollWrap">
				<z-paging :fixed="false" ref="paging" v-model="consultList" @query="queryList">
					<template #empty>
						<emptyView></emptyView>
					</template>
					<view class="box-container">
						<view class="mid" v-for="(item, index) in consultList" :key="index">
							<view class="top">
								<image :src="$fullImageUrl(item.expert.avatarUrl)"></image>
								<view class="mid-con">
									<view>{{ item.expert.expertName }}</view>
									<view>
										<text>咨询费：</text>
										<text>¥{{ item.amount }}</text>
									</view>
								</view>
							</view>
							<view class="middle" @click="readOrder(item)">
								<view v-if="item.appointmentStatus * 1 === 5">
									<view>退款金额：</view>
									<view>{{ item.refundAmount }}</view>
								</view>
								<view>
									<view>来访者：</view>
									<view>{{ item.consultationRecord.recordName }}</view>
								</view>
								<view>
									<view>主题：</view>
									<view>{{ item.expert.domainName }}</view>
								</view>
								<view>
									<view>咨询时间：</view>
									<view>{{ item.appointmentDate }} {{ item.startTime }}-{{ item.endTime }}</view>
								</view>
							</view>
							<view class="btn" v-if="item.appointmentStatus * 1 === 1 || item.appointmentStatus * 1 === 2">
								<!-- <view class="gopay" >查看订单</view> -->
								<view v-if="item.appointmentStatus * 1 === 1" class="gopay" @click.stop="gopay(item)">去支付</view>
								<view v-if="item.appointmentStatus * 1 === 1" class="cancleOrder" @click.stop="cancleOrder(item)">取消订单</view>
								<view v-if="item.appointmentStatus * 1 === 2" class="cancleOrder" @click.stop="cancleAppoint(item)">取消预约</view>
							</view>
							<view :style="{ backgroundColor: colorList[item.appointmentStatus * 1].bc, color: colorList[item.appointmentStatus * 1].fc }" class="right-btn">
								{{ colorList[item.appointmentStatus * 1].font }}
							</view>
						</view>
					</view>
				</z-paging>
			</view>
		</view>
	</view>
</template>

<script>
import { appointmentList, cancelAppointment } from '@/api/consult/index.js';
import { createRefund } from '@/api/weiPay/index.js';
import { isWithinTwoHours } from '@/utils/common.js';
export default {
	data() {
		return {
			items: ['全部', '待支付', '待咨询', '已完成', '已取消', '已退款', '退款中'],
			itemsCopy: [
				{
					id: 0,
					name: '全部'
				},
				{
					id: 1,
					name: '待支付'
				},
				{
					id: 2,
					name: '待咨询'
				},
				{
					id: 3,
					name: '已完成'
				},
				{
					id: 4,
					name: '已取消'
				},
				{
					id: 5,
					name: '已退款'
				},
				{
					id: 6,
					name: '退款中'
				}
			],
			colorList: [
				{},
				{
					fc: '#FFA000',
					bc: '#FFF8E1',
					font: '待支付'
				},
				{
					fc: '#1890FF',
					bc: '#E6F7FF',
					font: '待咨询'
				},
				{
					fc: '#00A854',
					bc: '#D4F1E4',
					font: '已完成'
				},
				{
					fc: '#FF4D4F',
					bc: '#FFEBE9',
					font: '已取消'
				},
				{
					fc: '#13C2C2',
					bc: '#F0F9FF',
					font: '已退款'
				},
				{
					fc: '#842029',
					bc: '#FFF3CD',
					font: '退款中'
				}
			],
			current: 0,
			currentId: 0,
			consultList: []
		};
	},
	onShow() {
		this.$refs.paging.reload();
	},
	methods: {
		queryList(pageNum, pageSize) {
			const querys = {
				pageNum,
				pageSize,
				appointmentStatus: this.currentId ? this.currentId : ''
			};
			appointmentList(querys).then((res) => {
				let list = [...res.rows];
				this.$refs.paging.completeByTotal(list, res.total);
			});
		},
		cancleAppoint(item) {
			uni.showModal({
				title: '提示',
				content: '您确定要取消此预约订单并退款吗？',
				success: (res) => {
					if (res.confirm) {
						if (isWithinTwoHours(`${item.appointmentDate} ${item.startTime}-${item.endTime}`)) {
							createRefund({
								id: item.id,
								appointmentStatus: '6'
							}).then((res) => {
								this.$modal.showToast('预约时间在两个小时之内，请等待后台审核中');
								setTimeout(() => {
									// this.current = 5;
									// this.currentId = 5;
									this.$refs.paging.reload();
								}, 800);
							});
						} else {
							createRefund({
								id: item.id,
								appointmentStatus: '6'
							}).then((res) => {
								this.$modal.showToast('退款成功');
								setTimeout(() => {
									// this.current = 5;
									// this.currentId = 5;
									this.$refs.paging.reload();
								}, 800);
							});
						}
					} else if (res.cancel) {
						// this.$modal.showToast('已取消');
					}
				}
			});
		},
		cancleOrder(item) {
			uni.showModal({
				title: '提示',
				content: '您确定要取消此预约订单吗？',
				success: (res) => {
					if (res.confirm) {
						cancelAppointment({
							id: item.id,
							appointmentStatus: '4'
						}).then((res) => {
							this.$modal.showToast('取消成功');
							setTimeout(() => {
								// this.current = 4;
								// this.currentId = 4;
								this.$refs.paging.reload();
							}, 800);
						});
					} else if (res.cancel) {
						// this.$modal.showToast('已取消');
					}
				}
			});
		},
		gopay(item) {
			this.$tab.navigateTo(`/subset/pages/consult/search/consultDetail?id=${item.id}`);
		},
		readOrder(item) {
			this.$tab.navigateTo(`/subset/pages/consult/search/consultDetail?id=${item.id}`);
		},
		onClickItem(e) {
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex;
				this.itemsCopy.forEach((i) => {
					if (this.items[e.currentIndex] == i.name) {
						this.currentId = i.id;
						this.$refs.paging.reload();
					}
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
.search {
	width: 100%;
	height: 100%;
	background: #f7f6f9;
	padding-top: 10rpx;
	box-sizing: border-box;
	overflow: hidden;
	.tab {
		width: 100%;
		height: 80rpx;
		margin: 0 auto 10rpx;
		background-color: #fff;
		box-sizing: border-box;

		overflow: hidden;
		padding: 0 40rpx;
		> view {
			width: 100%;
			overflow-x: scroll;
			display: grid;
			grid-template-columns: auto;
		}

		::v-deep .segmented-control__item {
			// width: 20% !important;
			height: 80rpx;
			line-height: 80rpx;
			// margin-right: 0 !important;
			margin-right: 60rpx;
		}

		::v-deep .segmented-control {
			grid-column: 1;
			display: flex;
			// justify-content: space-around;
			align-items: center;
			height: 80rpx;
			width: 100%;
		}
		::v-deep .segmented-control__item--text {
			padding: 24rpx 0 !important ;
			border-bottom-width: 0 !important;
		}
		::v-deep .segmented-control__item--text-bt {
			bottom: 0 !important;
		}
	}

	.con-wrap {
		width: 100%;
		height: calc(100% - 90rpx);
		overflow: hidden;
		.scrollWrap {
			width: 100%;
			height: 100%;
		}
		.box-container {
			width: 100%;
			padding: 0rpx 20rpx 30rpx 20rpx;
			box-sizing: border-box;
			overflow: hidden;
			.mid {
				width: 100%;
				padding: 26rpx 30rpx;
				box-sizing: border-box;
				margin-bottom: 30rpx;
				background-color: #fff;
				border-radius: 20rpx;
				position: relative;
				.right-btn {
					position: absolute;
					right: 0;
					top: 0;
					width: 160rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					border-top-right-radius: 20rpx;
					border-bottom-left-radius: 40rpx;
					background-color: #fff2d8;
					color: #f79a17;
					font-size: 26rpx;
				}
				.top {
					width: 100%;
					height: 80rpx;
					display: flex;
					border-radius: 20rpx;
					image {
						width: 60rpx;
						height: 80rpx;
						border-radius: 10rpx;
					}

					.mid-con {
						width: calc(100% - 60rpx);
						height: 100%;
						display: flex;
						align-items: center;
						padding-left: 40rpx;
						> view:nth-child(1) {
							width: 30%;
							font-size: 26rpx;
							font-weight: 500;
							color: #000;
						}
						> view:nth-child(2) {
							width: 50%;
							display: flex;
							> text {
								color: #a5a5a5;
								font-size: 26rpx;
							}
							> text:nth-child(2) {
								color: #f79a17;
								font-size: 30rpx;
								margin-left: 10rpx;
							}
						}
					}
				}
				.middle {
					width: 100%;
					border-top: 1rpx solid #f7f6f9;
					margin-top: 20rpx;
					padding-top: 20rpx;
					> view {
						width: 100%;
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;
						> view:nth-child(1) {
							color: #000;
							font-size: 26rpx;
							width: 140rpx;
						}
						> view:nth-child(2) {
							color: #929292;
							font-size: 26rpx;
						}
					}
					> view:nth-child(2) {
						margin: 20rpx 0;
					}
				}
				.btn {
					width: 100%;
					display: flex;
					flex-direction: row-reverse;
					padding-top: 26rpx;
					> view {
						font-size: 24rpx;
						border-radius: 10rpx;
						padding: 10rpx 20rpx;
						margin-left: 30rpx;
					}
					.cancleOrder {
						background-color: #f7f6f9;
						color: #000;
					}
					.gopay {
						background-color: #007bff;
						color: #ffffff;
					}
					.cancleAppoint {
						background-color: #fff3cd;
						color: #856404;
					}
				}
			}
		}
	}
}
</style>
